<template>
  <div class="app-wrapper">
    <user-info
      :drawer-visible-flag="drawerVisibleFlag"
      @close="close"
      @open="open"
      @refresh="refresh"
      @route-to="routeTo"
    />
    <div>
      <transition name="fade-transform" mode="out-in">
        <!-- <keep-alive :include="cachedViews"> -->
        <router-view :key="key" />
      <!-- </keep-alive> -->
      </transition>
    </div>
  </div>
</template>

<script>
import UserInfo from './components/UserInfo'

export default {
  name: 'MapView',
  components: {
    UserInfo
  },
  data() {
    return {
      drawerVisibleFlag: false
    }
  },
  computed: {
    key() {
      return this.$route.path
    }
  },
  methods: {
    close() {
      this.drawerVisibleFlag = false
    },
    open() {
      this.drawerVisibleFlag = true
    },
    refresh() {
      this.$router.go(0)
    },
    routeTo(siteId, entId) {
      this.$router.push({
        path: '/display',
        query: {
          siteId,
          entId
        }
      })
      this.$router.go(0)
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  @import "~@/styles/variables.scss";
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    &.mobile.openSidebar{
      position: fixed;
      top: 0;
    }
  }
</style>
